<template>
  <div class="address-wrap">
    <!--标题-->
    <div class="tit-wrap flex-yc flex-xbt">
      <div class="flex-yc">
        <h2>收货信息</h2>
        <p>修改地址可能会改变商品送达时间，请以实际配送为准</p>
      </div>
      <div class="add-addr flex-yc a">
        <el-icon size="12" class="el-icon--left"><Plus /></el-icon>
        新增收货地址
      </div>
    </div>

    <div class="address-box flex">
      <div
        class="address-item a"
        :class="{ active: item === 1, hide: item > hiddenAddressNum }"
        v-for="item in 10"
        :key="item"
      >
        <span class="default">默认</span>
        <span class="checked flex-xyc">
          <el-icon><Check /></el-icon>
        </span>
        <div class="username-wrap flex-yc flex-xbt">
          <div class="flex-yc">
            <span class="addr">四川成都</span>
            <span class="name">王露露（收）</span>
          </div>
          <div class="btn-wrap">
            <el-link type="primary" :underline="false">删除</el-link>
            <el-link type="primary" :underline="false">编辑</el-link>
            <el-link type="primary" :underline="false">设为默认</el-link>
          </div>
        </div>
        <div class="mobile flex-yc">
          <el-icon class="el-icon--left"><PhoneFilled /></el-icon>
          <span>18292911191</span>
        </div>
        <div class="address flex-yc">
          <el-icon class="el-icon--left"><Location /></el-icon>
          <span>四川省成都市高新区中和二街军安卫视花园</span>
        </div>
      </div>
    </div>
    <div class="flex-xyc">
      <el-link type="primary" :underline="false" @click="onShowAddressBoth">
        {{ handleHiddenAddressTxt }}
        <el-icon v-if="hiddenAddressNum === 3"><ArrowDown /></el-icon>
        <el-icon v-else><ArrowUp /></el-icon>
      </el-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const hiddenAddressNum = ref(3)
const handleHiddenAddressTxt = ref('展开地址')
const onShowAddressBoth = () => {
  if (hiddenAddressNum.value === 3) {
    hiddenAddressNum.value = 1000
    handleHiddenAddressTxt.value = '隐藏地址'
  } else {
    hiddenAddressNum.value = 3
    handleHiddenAddressTxt.value = '展开地址'
  }
}
</script>

<style scoped lang="scss">
.address-wrap {
  .tit-wrap {
    padding-bottom: 24px;
    font-size: 16px;
    font-weight: 400;
    color: rgb(4 7 36 / 45%);

    h2 {
      margin-right: 14px;
      font-size: 16px;
      font-weight: 500;
      color: rgb(4 7 36 / 85%);
    }

    .add-addr {
      color: $primary;
    }
  }

  .address-box {
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: hidden;

    .address-item {
      .flex-yc + .flex-yc {
        margin-top: 8px;
      }

      &.hide {
        display: none;
      }

      position: relative;
      width: 386px;
      padding: 24px;
      margin-bottom: 14px;
      overflow: hidden;
      border: 1px solid $borderCol;
      border-radius: 4px;

      &.active {
        border-color: $primary;
      }

      .default {
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        padding: 4px 12px;
        font-size: 12px;
        color: #22891f;
        background-color: #e6f6e5;
      }

      .checked {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 22px;
        height: 22px;
        font-size: 12px;
        color: #fff;
        background-color: $primary;
        border-radius: 8px 0 0;
      }

      .username-wrap {
        font-size: 16px;
        color: rgb(4 7 36 / 85%);

        span {
          &.addr {
            padding-right: 12px;
            border-right: 1px solid $borderCol;
          }

          &.name {
            padding-left: 12px;
          }
        }

        .btn-wrap {
          :deep {
            .el-link {
              font-size: 12px;

              & + .el-link {
                margin-left: 8px;
              }
            }
          }
        }
      }

      .mobile,
      .address {
        font-size: 14px;
        color: rgb(4 7 36 / 85%);
      }
    }
  }
}
</style>
